<template>
  <div>
   
    <el-card class="box-card">
      <div class="card-query-body">
        <div class="demo-form-inline">
          <el-input placeholder="审批人"></el-input>
          <el-button icon="el-icon-search" type="primary" class="btnQuery"
            >查询</el-button
          >
        </div>
        <div>
          <el-button
            icon="el-icon-document-add"
            type="primary"
            @click="handleAdd"
            >新增</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="handleRefresh"
            >刷新</el-button
          >
        </div>
      </div>
    </el-card>
    <el-table :data="tableData" style="width: 100%"  v-loading:loading border >
      <el-table-column label="图片" prop="currentUrl">
        <template slot-scope="scope" >
          <el-image 
           :src="scope.row.Url"
           ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="Id" prop="id"> </el-table-column>
      <el-table-column label="图片名" prop="pictureName"> </el-table-column>
      <el-table-column label="图片路径" prop="picturePath"> </el-table-column>
      <el-table-column label="创建时间" prop="createdTime"> </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <!-- <div class="block">
      <el-pagination
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      > -->
    <!-- </el-pagination> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { getList1 } from "../api/Media";
export default {
  data() {
    return { 
      currentUrl:'',
      tableData: [
  
      ],
      // pager: {
      //   pageIndex: 1, // 页码
      //   pageSize: 10, // 页面大小（每页项目的数量）
      //   rowsTotal: 30, // 总记录数
      // },
      formData: {
        id: 0,
        username: "",
        password: "113",
        remarks: "",
      },
      currentIndex: 0,
      dialogFormVisible: false,
    };
  },
  methods: {
    handleAdd() {
      this.dialogFormVisible = true;
      this.formData.id = 0;
      this.formData.username = "";
      this.formData.remarks = "";
    },
    handleRefresh() {
      this.fetchData(this.pager);
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.formData.id = row.id;
      this.formData.username = row.username;
      this.formData.remarks = row.remarks;

      this.currentIndex = index;
      // console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },

    handleCancel() {
      this.dialogFormVisible = false;
    },

    // 拉取数据方法
    fetchData() {
      getList1()
        .then((res) => {
          this.tableData = res.data;
          console.log(this.tableData);
          this.tableData.forEach((ele => {
            ele.Url = "http://localhost:5000/" + ele.picturePath;
            this.currentUrl = ele.Url;
          }));
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>
<style scoped>
.card-query-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-form-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnQuery {
  margin-left: 10px;
}
</style>